<template>
<scroll ref="scroll" class='search-scroll-wrapper'>
  <mu-list>
    <mu-list-item
      v-for="singleitem in list"
      :key="singleitem.id"
      avatar
      :ripple="false"
      button
      @click="search(singleitem)"
    >
      <mu-list-item-content>
        <mu-list-item-title>{{singleitem.name}}</mu-list-item-title>
        <mu-list-item-sub-title>{{singleitem.artists[0].name}}-{{singleitem.album.name}}</mu-list-item-sub-title>
        <mu-divider></mu-divider>
      </mu-list-item-content>
    </mu-list-item>
  </mu-list>
</scroll>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      selects: []
    }
  },
  methods: {
    search (singleitem) {
      this.$emit('search', singleitem)
    },
    ...mapMutations({
      setURL: 'SET_URL'
    })
  }
}
</script>
<style lang="scss" scoped>
/deep/ .mu-item-title {
  font-size: 14px;
}
.search-scroll-wrapper{
  height: 100%;
  overflow: hidden;
}
</style>
